<template>
  <ScrollArea :bot-margin="50">
    <div class="sub-header q-ma-sm">
      {{ 'Order History' }}
    </div>
    <q-table
      :rows="parent"
      :columns="cols"
      class="my-table"
      :rows-per-page-options="[5]"
      @row-dblclick="onRowClick"
      wrap-cells
    >
      <template v-slot:body-cell="props">
        <q-td>
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-last_status="props">
        <q-td>
          <div v-if="props.value != 'New Register' ">
            <div
              class="status-box"
              :class="getOrderStatusColor(props.value)"
            ></div>
            {{ props.value }}
          </div>
        </q-td>
      </template>

      <!-- <template v-slot:body-cell-last_check_in="props">
        <q-td>
          {{ formatDateTimeString(props.value) }}
        </q-td>
      </template>

      <template v-slot:body-cell-last_check_out="props">
        <q-td>
          {{ formatDateTimeString(props.value) }}
        </q-td>
      </template> -->
    </q-table>
    <div v-if="childs.length == 0 && p_props.isParent" class="text-red">
      Show the child order history if have parts
    </div>
    <div v-if="childs.length > 0" class="sub-header q-ma-sm">
      {{ 'Child Order History' }}
    </div>
    <q-table
      v-if="childs.length > 0"
      class="my-table"
      :rows="childs"
      :columns="cols"
      :rows-per-page-options="[5]"
      @row-dblclick="onRowClick"
      wrap-cells
    >
      <template v-slot:body-cell="props">
        <q-td>
          <div>
            {{ props.value }}
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-last_status="props">
        <q-td>
          <div v-if="props.value != 'New Register' ">
            <div
              class="status-box"
              :class="getOrderStatusColor(props.value)"
            ></div>
            <div v-if="props.value != 'New Register'">
              {{ props.value }}
            </div>
          </div>
        </q-td>
      </template>

      <!-- <template v-slot:body-cell-last_check_in="props">
        <q-td>
          <div>
            {{ props.value == null ? '' : formatDateTimeString(props.value) }}
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-last_check_out="props">
        <q-td>
          <div>
            {{ props.value == null ? '' : formatDateTimeString(props.value) }}
          </div>
        </q-td>
      </template> -->
    </q-table>
  </ScrollArea>

  <q-dialog full-width v-model="lv2table">
      <OrderHistorylv2Table
        :serial_no="editRow.serial_no"
        :stock-code="editRow.stock_code"
      ></OrderHistorylv2Table>
  </q-dialog>
</template>

<script setup lang="ts">
import {
  deleteStockItemEdocs,
  getStockItemEdocs,
} from 'src/services/edocService';
import { onMounted, ref } from 'vue';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { getOrderStatusColor } from 'src/utils/getPublic';
import { useQuasar } from 'quasar';
import { getChildPartsList, searchPart } from 'src/services/partsService';
import {
  getOrderChildPartsList,
  getOrderParts,
} from 'src/services/repairService';
import OrderHistorylv2Table from './OrderHistorylv2Table.vue';
import { Parts, RepairOrderPart } from 'src/services/type';
import ScrollArea from '../ScrollArea.vue';
const p_props = withDefaults(
  defineProps<{
    stockCode: string;
    serial_no: string;
    isParent: boolean;
    mode?: 'order';
    order_id?: number;
  }>(),
  {}
);

const $q = useQuasar();
const id = ref(0);
const diag = ref(false);
const editDiag = ref(false);
const lv2table = ref(false);
const parent = ref<Parts[]>([]);
const childs = ref<Parts[]>([]);
const align = 'left';
const cols = [
  {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  // {
  //   name: 'order_no',
  //   label: 'Order No',
  //   field: 'last_order_no',
  //   sortable: true,
  //   align,
  // },
  {
    name: 'last_check_in',
    label: 'Last Check In',
    field: 'last_check_in',
    sortable: true,
    format:(val:string)=>{
      if (val){
        const arr = val.split('T')
        return arr[0]
      }
      return ''
    },
    align,
  },
  {
    name: 'last_check_out',
    label: 'Last Check Out',
    field: 'last_check_out',
    format:(val:string)=>{
      if (val){
        const arr = val.split('T')
        return arr[0]
      }
      return ''
    },
    sortable: true,
    align,
  },
  {
    name: 'last_status',
    label: 'Test Result',
    field: 'last_status',
    sortable: true,
    align,
  },
];

const editRow = ref();

function onRowClick(evt: any, row: any) {
  editRow.value = row;
  lv2table.value = true;
}

async function initData() {
  getPart();
  getChildParts();
}

async function getPart() {
  const part = await searchPart(p_props.stockCode, p_props.serial_no);

  if (part.data) {
    parent.value = part.data;
    console.log(part.data);
    
  }
}

async function getChildParts() {
  if (p_props.mode == 'order') {
    getOrderPartsListData()
  }else{
    getChildPartsListData()
  }
  
}

async function getOrderPartsListData(){
  if (p_props.order_id){
    
  const order_parts = await getOrderParts(p_props.order_id);
  
  if (order_parts.data) {
      console.log(order_parts.data);
      const data = order_parts.data.map((v: RepairOrderPart) => {
        if (v.part){

          return {
            ...v,
            last_check_in: v.part.last_check_in ? v.part.last_check_in : '',
            last_check_out: v.part.last_check_out ? v.part.last_check_out : '',
            last_status: v.part.last_status,
          };
        }
      });

      childs.value = data.filter((a: RepairOrderPart) => {
        console.log(a);
        if (a){
          return a.parent_part != null;
        }
      });
      parent.value = data.filter((a: RepairOrderPart) => {
        console.log(a);
        if (a){

          return a.parent_part == null;
        }
      });
    }
  }
}

async function getChildPartsListData(){
  const childParts = await getChildPartsList(
    p_props.stockCode,
    p_props.serial_no
  );
  if (childParts.data) {
    console.log(childParts.data);

    childs.value = childParts.data
  }
}

function editFn(sie_id: number) {
  id.value = sie_id;
  editDiag.value = true;
}
function deleteFn(id: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    const res = await deleteStockItemEdocs(id);
    if (res) {
      initData();
    }
  });
}
onMounted(() => {
  initData();
});
</script>
<style scoped></style>
